import { useState, useEffect } from 'react';
import { Form, Select, Input, Modal, Tooltip } from 'antd';
import CommonModal from '@/components/CommonModal';
import SubTitle from '@/pages/OrderModule/common/components/SubTitle';
import IconFont from '@/components/IconFont';
import Api from '../../service';

const MatchYuncangOrderModal = (props) => {
  const { handleOk, handleCancel } = props;
  
  const [form] = Form.useForm();
  const [visible, setVisible] = useState(true);
  const [yunCangList, setYunCangList] = useState([]);

  //获取云仓列表数据
	const queryYunCangList = async () => {
		const params = {
			type: 19,
			size: 100,
			current: 1
		};
		const { data, success } = await Api.getTableDataOp(params);
		if (success) {
			const { records = [] } = data || {};
			setYunCangList(records);
		}
	};

  useEffect(() => {
    queryYunCangList();
  }, [])

  const onOk = () => {
    form.validateFields().then(async (values) => {
      START_LOADING();
      const { success, msg } = await Api.jdCloudOrderMatch(values);
      if (success) {
        Modal.info({
          icon: <IconFont type="iconchenggong" />,
          title: <span className="common-color10">成功提示</span>,
          content: '京东云仓的订单，运单号已经正在匹配中，稍后请刷新界面查看！',
          okText: '确定',
          onOk: () => {
            handleOk();
          }
        });
      } else {
        Modal.info({
          icon: <IconFont type="iconcuowu" />,
          title: <span className="common-color9">错误提示</span>,
          content: msg,
          okText: '确定',
        });
      }
      END_LOADING();
      setVisible(false);
    })
  }

  return (
    <CommonModal
      visible={visible}
      title='云仓单号匹配'
      onOk={onOk}
      onCancel={() => setVisible(false)}
      afterClose={handleCancel}
      width={600}
    >
      <div style={{ backgroundColor: '#EBF4FF', padding: 10, marginBottom: 10 }}>
        <div>注意：</div>
        <div>1、在执行时因为需要读取数据，请勿退出该浏览器的京东账号。</div>
        <div>2、因为京东平台的登录会定时失效，如果发现同步停止请重新执行同步信息。</div>
        <div>3、请选择相应的京东云仓授权店铺进行同步，如有多店铺请需要执行多次。</div>
        <div>4、如何获取登录信息请看：<a href="https://all.zhaojiafang.com/#/blank/jdOrderMatchHelper" target="_blank">如何获取登录信息教程</a></div>
      </div>
      <SubTitle symbol as="s2" title="修改方式" wrapStyle={{ marginBottom: 16 }} />
      <Form 
        form={form}
        labelCol={{ span: 5 }}
        wrapperCol={{ span: 10 }}
        labelAlign="left"
      >
        <Form.Item label="云仓店铺" name="ecStore" rules={[{ required: true, message: '请选择云仓店铺' }]}>
          <Select
            allowClear
            showSearch
            placeholder="请选择云仓店铺"
            optionFilterProp="label"
          >
            {yunCangList.length > 0 ? yunCangList.map(d => (
              <Option key={d.id} value={d.id} label={d.storeName}>
                <Tooltip title={d.storeName}>{d.storeName}</Tooltip>
              </Option>
            )) : null}
          </Select>
        </Form.Item>
        <Form.Item 
          label="云仓登录信息" 
          name="cookie" 
          rules={[
            { required: true, message: '请输入云仓登录信息' },
            () => ({
              validator(_, value) {
                if (value && value.length > 1000) {
                  return Promise.reject(new Error('限1000字符'));
                }
                return Promise.resolve();
              }
            })
          ]}
        >
          <Input.TextArea
            allowClear
            rows={4}
            placeholder="请输入云仓登录信息"
          />
        </Form.Item>
      </Form>
    </CommonModal>
  );
}

export default MatchYuncangOrderModal;